<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-wcs__stnMapping}">
      <wcs-form 
        v-model="dataForm"
        :formList="formList"
        :table-column="tableColumn"
        :advanced="advanced"
        @check-change="checkChange"
        @changeAdvance="changeAdvance"
        @getDataList="getDataList"
        @getReset="getReset"
      >
      </wcs-form>
      <wcs-table
        ref="wcsTable"
        v-model="dataForm"
        :page="page"
        :total="total"
        :limit="limit"
        :tableData="dataList"
        :table-column="column"
        :module-options="mixinViewModuleOptions"
        :dataListLoading="dataListLoading"
        :showSelection="true"
        @changeStation="changeStation"
        @addOrUpdateHandle="addOrUpdateHandle"
        @pageSizeChangeHandle="pageSizeChangeHandle"
        @pageCurrentChangeHandle="pageCurrentChangeHandle"/>

      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./components/stnMapping-add-or-update.vue";
import debounce from "lodash/debounce";
import { formList, tableColumn } from './config';
import wcsTable from "@/components/wcs-table";
import wcsForm from "@/components/wcs-form";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/wcs/stnMapping/page",
        getDataListIsPage: true,
        deleteURL: "/wcs/stnMapping",
        deleteIsBatch: true,
      },
      dataForm: {
        id: '',
        dvcNo: '',
        wcsStation: '',
        status: '',
        active: '',
        contNo: '',
        comments: '',
      },
      page: 1,
      total: 0,
      limit: 10,
      dataList: [],
      selectedIds: [],
      formList,
      tableColumn,
      column: [],
      advanced: false
    };
  },
  components: {
    AddOrUpdate,
    wcsTable,
    wcsForm
  },
  methods: {
    pageSizeChangeHandle(val) {
      this.limit = val; // 更新每页条数
      this.page = 1;    // 重置到第一页
      this.getDataList();
    },
    //0.重置搜索框
    getReset() {
      this.dataForm = this.$options.data().dataForm;
    },
    // 处理表格多选
    handleSelectionChange(selection) {
      this.selectedIds = selection.map(item => item.id)
    },
    //修改库位状态
    changeStation: debounce(function (val, row) {
      const tempStatus = row.active === 0 ? 1 : 0;
      this.dataForm.id = row.id;
      this.$http.post(`/wcs/stnMapping/forbid/${row.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          //如果更新失败则重置为原来的状态
          row.active = tempStatus;
          return this.$message.error(res.msg)
        }
        if (tempStatus !== 1) {
          console.info("1111");
          this.$message({
            message: '货位已禁用',
            type: 'success',
            duration: 500,
            onClose: () => {
            }
          })
        }
        if (tempStatus !== 0) {
          console.info("0000");
          this.$message({
            message: '货位解禁成功',
            type: 'success',
            duration: 500,
            onClose: () => {
            }
          })
        }
      }).catch(() => { })
    }),
    forbidHandle(id) {
      if (!this.dataForm.id) {
        return this.$message({
          message: this.$t('prompt.forbid'),
          type: 'warning',
          duration: 500
        })
      }
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('forbid') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$http.post('/wcs/stnMapping/forbid/' + this.dataForm.id)
          .then(({ data: res }) => {
            if (res.code != 0) {
              return this.$message.error(res.msg)
            }
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 500,
              onClose: () => {
                this.getDataList()
              }
            })
          }).catch(() => { })


      }).catch(() => { })

    }
  },
};
</script>
<style>
.right-handle-group {
  float: right;
}
</style>


